<script>
//导入axios的核心对象
import axios from '@/http'
import {ElMessage} from "element-plus";
export default {
  name: "My",
  data(){
    return {
        emp: {},//员工信息
        minZuList:[],//民族
        typeList:[],//证件类型列表
        marriageList:[],//婚姻状况列表
        statusList:[],//工作状态列表
    }
  },
  methods:{
    getEmpInfo(){
      //发送请求获取个人信息
      axios.get('/api/emp/info').then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          ElMessage({
            message: '查询个人信息成功',
            type: 'success'
          })
          //直接赋值
          this.emp = resp.data;
        }else{
          ElMessage({
            message: '查询个人信息失败',
            type: 'error'
          })
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    //获取民族
    getMinZuList(){
      axios.get('/api/emp/minZuList').then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          this.minZuList = resp.data;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    //获取证件类型列表
    getTypeList(){
      axios.get('/api/emp/typeList').then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          this.typeList = resp.data;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    //获取婚姻状况列表
    getMarriageList(){
      axios.get('/api/emp/marriageList').then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          this.marriageList = resp.data;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    //获取工作状态列表
    getStatusList(){
      axios.get('/api/emp/statusList').then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          this.statusList = resp.data;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    myBack(){
      this.$router.go(-1);
    }
  },
  mounted(){
    this.getMinZuList()
    this.getTypeList()
    this.getMarriageList()
    this.getStatusList()
    this.getEmpInfo()
  }
}
</script>

<template>
  <div>
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
         <div class="personal_header">
           <el-space>
             <el-icon size="24" color="#FFF" style="background-color: #3FABF9;"><Edit /></el-icon>
             <span>我的信息</span>
           </el-space>
           <el-space>
             <el-button type="primary" plain icon="Edit">编辑</el-button>
             <el-button type="primary" plain icon="Back"  @click="myBack">返回</el-button>
           </el-space>
         </div>
        </div>
      </template>
      <div class="personal_info">
        <div class="personal_img"><el-image :src="emp.avatar" alt="" fit="fill" /></div>
        <div class="personal_detail">
          <el-form :model="emp" :inline="true" class="personal_form"  label-width="80px" label-position="left" size="small" >
            <el-form-item label="员工姓名"  style="width:400px;" >
              <el-input v-model="emp.empName" style="width:220px" :disabled="false"/>
            </el-form-item>
            <el-form-item label="员工编号" style="width:300px;" >
              <el-input v-model="emp.empId" style="width:220px" disabled/>
            </el-form-item>
            <el-form-item label="登录账号" style="width:400px;">
              <el-input v-model="emp.account" style="width:220px" disabled />
            </el-form-item>
            <el-form-item label="初始密码" >
              <el-input type="password" v-model="emp.password" style="width:220px" disabled />
            </el-form-item>
            <el-form-item label="归属部门" style="width:400px;">
              <el-input v-model="emp.deptName" style="width:220px" />
            </el-form-item>
            <el-form-item label="职务" >
              <el-input v-model="emp.empPost" style="width:220px" />
            </el-form-item>
            <el-form-item  label="性别" style="width:400px;" >
              <el-select
                  placeholder=""
                  size="small"
                  style="width: 220px"
                  v-model="emp.gender"
              >
                <el-option
                    label="男"
                    :value="1"
                />
                <el-option
                    label="女"
                    :value="2"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="民族" >
              <el-select
                  placeholder=""
                  size="small"
                  style="width: 220px"
                  v-model="emp.minZuId"
              >
                <el-option
                    v-for="minZu in minZuList"
                    :label="minZu.minZuName"
                    :value="minZu.minZuId"
                    :value-key="minZu.minZuId"
                />
              </el-select>
          </el-form-item>
            <el-form-item label="证件类型"  style="width:400px;">
              <el-select
                  placeholder=""
                  size="small"
                  style="width: 220px"
                  v-model="emp.typeId"
              >
                <el-option v-for="type in typeList"  :value-key="type.typeId" :label="type.typeName" :value="type.typeId"/>

              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" >
              <el-input v-model="emp.typeCode" style="width:220px" />
            </el-form-item>
            <el-form-item label="联系电话" style="width:400px;" >
              <el-input v-model="emp.phone" style="width:220px" />
            </el-form-item>
            <el-form-item label="婚姻状况" >
              <el-select
                  placeholder=""
                  size="small"
                  style="width: 220px"
                  v-model="emp.marriageId"
              >
                <el-option v-for="marriage in marriageList" :value-key="marriage.marriageId" :label="marriage.marriageInfo" :value="marriage.marriageId" />

              </el-select>
            </el-form-item>
            <el-form-item label="居住地址" style="width:400px;">
              <el-input v-model="emp.address" style="width:220px" />
            </el-form-item>
            <el-form-item label="员工状态" >
              <el-select
                  placeholder=""
                  size="small"
                  style="width: 220px"
                  v-model="emp.statusId"
                  disabled
              >
                <el-option v-for="status in statusList" :value-key="status.statusId" :label="status.statusName" :value="status.statusId" />

              </el-select>
            </el-form-item>
            <el-form-item label="个人简介" >
              <el-input
                  style="width: 650px"
                  :rows="10"
                  type="textarea"
                  v-model="emp.empProfile"
                  placeholder="个人简介"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>

<!--      <template #footer>Footer content</template>-->
    </el-card>
  </div>
</template>

<style scoped>
.personal_header{
  display: flex;
  justify-content: space-between;
}
.personal_info{
  display: flex;
}
.personal_img{
  border:1px solid #ccc;
  padding:2px;
  width:200px;
  height:210px;
}
.personal_detail{
  width:800px;
  margin-left:20px;
}
</style>